import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Router } from 'utils/router';
import Loadable from 'utils/loadable';
import { Header, Body, SideBar, BodyContent, Content } from '@alife/devops-ui';
import Nav from './nav';
import * as actions from '../actions/index';
import intl from '../../../../../../../locale';

const { pathResource } = window.FORCE;

const Settings = Loadable({
  loader: () => import('../pages/settings'),
});

class Root extends Component {
  renderMain = () => {
    return (
      <Router basepath={`/${pathResource.fullPath}/settings`} primary={false}>
        <Settings path="/" />
      </Router>
    );
  };

  render() {
    const { pathname } = window.location;
    const tabTitle = pathname.split('/');
    const defaultActiveKey = tabTitle.slice(tabTitle.length - 1).join();
    return (
      <>
        <Header
          title={intl.get({
            id: 'code-assets.groupSettings.containers.root.Set',
            defaultMessage: '设置',
          })}
        />
        <Body>
          <SideBar closeable size="small">
            <Nav defaultActiveKey={defaultActiveKey} />
          </SideBar>
          <BodyContent>
            <Content>{this.renderMain()}</Content>
          </BodyContent>
        </Body>
      </>
    );
  }
}

export default connect(
  (state) => state.group.groupSettings,
  (dispatch) => bindActionCreators(actions, dispatch),
)(Root);
